<template>
  <div class="articleSelect">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabs" :key="item" :label="tabsNameConfig[item]" :name="item">
        <el-radio-group v-model="uuid">
          <el-radio  @change="selectChange(radioItem)" v-for="radioItem in tableData" :key="radioItem.uuid" :label="radioItem.uuid" :title="radioItem.desc">{{radioItem.name}}</el-radio>
        </el-radio-group>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="count"
          hide-on-single-page
          :page-size="10"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-divider class="divider divideTop"></el-divider>
  </div>
</template>
<script>
export default {
  name: 'articleSelect',
  props: ['tabs', 'selectUUID', 'selectArticle', "searchKey"],
  data() {
    return {
      uuid: '',
      activeName: '',
      tabsNameConfig: {
        'ZX': '资讯',
        'HD': '活动',
        'BG': '研究院',
        'AL': '案例库',
        'QY': '企业',
        'TAG': '标签',
        'SELF': '自定义',
      },
      tableData: [],
      count: 0,
      currentPage: 1,
    }
  },
  methods: {
    selectChange(item) {
      const detailNameMap = {
        'HD': 'activityDetail',
        'BG': 'instituteDetail',
      }
      const detailName = detailNameMap[this.activeName] || 'informationDetail';
      this.selectArticle(item, detailName)
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.handleClick()
    },
    handleClick(searchKey) {
      const params = {
        type: this.activeName === 'TAG' ? 'BQ' : this.activeName,
        start: (this.currentPage - 1) * 10,
        limit: 10
      };
      if (this.searchKey) {
        params.searchKey = this.searchKey
      }
      const url = this.activeName === 'TAG' ? '/api/tags.json' : '/api/articles.json'
      this.$axios.get(url, { params }).then((response) => {
        this.tableData = response.list;
        this.count = response.count;
      });
    }
  },
  mounted(){
    console.log(1111, this.tabs)
    this.activeName = this.tabs[0];
    this.uuid = this.selectUUID;
    this.handleClick()
  }
};
</script>
<style lang="scss" scoped>
.articleSelect {
  .el-radio-group {
    width: 100%;
    /deep/ .el-radio {
      width: 100%;
      max-width: 100%;
      padding-top: 6px;
      .el-radio__label {
        display: inline-block;
        width: 90%;
        max-width: 90%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
